<!-- 采购管理-物料汇总列表 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div>
    <div class="title-item">
      <a-space style="margin-left: 40px">
        <div
          style="
            width: 5px;
            height: 23px;
            background-color: rgba(61, 126, 255, 1);
            border: none;
            border-radius: 2px;
          "
        ></div>
        <div>执行信息</div></a-space
      >
    </div>
    <div style="width: 95%; margin: 10px auto">
      <TableTurn
        :table-data="getData"
        ref="tableRef"
        :args="args"
        :is-show-pagination="false"
      >
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="物料类型"
          :width="150"
          dataIndex="materialName"
          align="center"
        ></a-table-column>
        <a-table-column
          title="物料编码"
          :width="150"
          dataIndex="number"
          align="center"
        ></a-table-column>
        <a-table-column
          title="物料名称"
          :width="150"
          dataIndex="name"
          align="center"
        ></a-table-column>
        <a-table-column
          title="规格型号"
          :width="150"
          dataIndex="spec"
          align="center"
        ></a-table-column>
        <a-table-column
          title="采购单位"
          :width="150"
          dataIndex="basicName"
          align="center"
        ></a-table-column>
        <a-table-column
          title="需求数量"
          :width="150"
          dataIndex="amount"
          align="center"
        ></a-table-column>
        <a-table-column title="需求交付日期" :width="150" align="center"
          ><template #cell="{ record }">
            {{ dayjs(record.deliveryTime).format('YYYY-MM-DD') }}
          </template></a-table-column
        >
        <a-table-column title="状态" :width="150" align="center"
          ><template #cell="{ record }">
            <a-typography-text v-if="record.state === 1">
              待派工
            </a-typography-text>
            <a-typography-text v-if="record.state === 2" type="primary">
              执行中
            </a-typography-text>
          </template></a-table-column
        >
        <a-table-column
          title="关联任务单号"
          :width="150"
          dataIndex="taskNumber"
          align="center"
        >
          <template #cell="{ record }">
            <a-typography-text v-if="!record.taskNumber">
              无
            </a-typography-text>
            <a-typography-text v-else type="primary">
              {{ record.taskNumber }}
            </a-typography-text>
          </template>
        </a-table-column>
        <a-table-column
          title="关联采购订单号"
          :width="150"
          dataIndex="orderNumber"
          align="center"
        >
          <template #cell="{ record }">
            <a-typography-text v-if="!record.orderNumber" disabled>
              无
            </a-typography-text>
            <a-typography-text v-else type="primary">
              {{ record.orderNumber }}
            </a-typography-text>
          </template>
        </a-table-column>
        <a-table-column
          title="关联计划单号"
          :width="150"
          dataIndex="planNumber"
          align="center"
        >
          <template #cell="{ record }">
            <a-typography-text v-if="!record.planNumber" disabled>
              无
            </a-typography-text>
            <a-typography-text v-else type="primary">
              {{ record.planNumber }}
            </a-typography-text>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </div>
  <div>
    <div class="title-item">
      <a-space style="margin-left: 40px">
        <div
          style="
            width: 5px;
            height: 23px;
            background-color: rgba(61, 126, 255, 1);
            border: none;
            border-radius: 2px;
          "
        ></div>
        <div>订单信息</div></a-space
      >
    </div>
    <div style="width: 95%; margin: 10px auto">
      <orderResp :tableData="orderRespData" v-if="orderRespData"></orderResp>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, nextTick, defineAsyncComponent } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { getPurchaseDetails } from '@/api/buy-management/buy-material/index';
  import { postPlanPurchase } from '@/api/buy-management/buy-plan/index';

  let orderResp = defineAsyncComponent(() => import('./order-resp/index.vue'));
  //   const store = useBuyStore();
  const isTaskVisible = ref(false);
  const route = useRoute();
  const router = useRouter();
  const title: string = '物料详情页';
  const breadCrumb: string[] = ['采购管理', '采购管理', '物料详情页'];
  const modelVisible = ref(false);
  const createEnable = ref(true);
  const setupType = ref();
  const isPlanVisible = ref(false);
  const taskTableData = ref([]);
  const orderRespData = ref([]);
  const executionInfo = ref<any>([]);

  // 选择器配置
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  // 分页配置
  interface ParamsType {
    pageIndex: number;
    pageSize: number;
    number: string;
    clientCompanyName: string;
    status: number[];
    startTime: string;
    endTime: string;
  }
  const demandListParams = reactive<ParamsType>({
    pageIndex: 0,
    pageSize: 10,
    number: '',
    clientCompanyName: '',
    status: [],
    startTime: '',
    endTime: '',
  });
  const pageData = reactive({
    page: 0,
    size: 10,
  });

  const matterData = ref();

  const getData = async () => {
    const res = await getPurchaseDetails({ id: route.query.id });
    orderRespData.value = res.orderResp;
    executionInfo.value.push({ ...res.productResp });
    return executionInfo.value;
  };

  // 表格配置
  const args = reactive({
    stripe: true,

    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮以客户名称来作为key
  });

  const columns = [
    {
      id: 1,
      title: '序号',
      visible: true,
      type: 'string',
      code: 'id',
    },
    {
      id: 2,
      title: '物料编码',
      visible: true,
      type: 'string',
      code: 'number',
    },
    {
      id: 3,
      title: '物料名称',
      visible: true,
      type: 'string',
      code: 'name',
    },
    {
      id: 4,
      title: '规格型号',
      visible: true,
      type: 'string',
      code: 'spec',
    },
    {
      id: 5,
      title: '采购单位',
      visible: true,
      type: 'string',
      code: 'purchaseUnitName',
    },
    {
      id: 6,
      title: '需求数量',
      visible: true,
      type: 'string',
      code: 'amount',
    },
    {
      id: 7,
      title: '关联物料详情',
      visible: true,
      type: 'string',
      code: 'details',
    },
    {
      id: 8,
      title: '状态',
      visible: true,
      type: 'string',
      code: 'state',
    },
  ];
  const selectedHeader = computed(() => {
    return columns.filter((item) => item.visible);
  });

  const visible = ref(false);

  const detailsData = ref();
  const details = (Arr: any) => {
    visible.value = true;
    detailsData.value = Arr;
  };

  // 选择功能
  const SelectDate = ref([]);
  const onSelect = (e, keys, val: any) => {
    const index = SelectDate.value.findIndex((item) => {
      return item.id === keys;
    });
    if (index === -1) {
      SelectDate.value.push(val);
      createEnable.value = false;
    } else {
      SelectDate.value.splice(index, 1);
      if (SelectDate.value.length <= 0) {
        createEnable.value = true;
      }
    }
  };

  const SeeDate = ref();
  const See = (item: any) => {
    modelVisible.value = true;
    SeeDate.value = item;
    setupType.value = 1;
  };

  const SeeDateColumns = [
    {
      title: '物料编码',
      dataIndex: 'number',
    },
    {
      title: '物料名称',
      dataIndex: 'name',
    },
    {
      title: '型号规格',
      dataIndex: 'spec',
    },
    {
      title: '采购单位',
      dataIndex: 'spec',
    },
    {
      title: '需求数量',
      dataIndex: 'amount',
    },
    {
      title: '关联申请单号',
      dataIndex: 'email',
    },
    {
      title: '供应商名称',
      dataIndex: 'SupplierId',
    },
    {
      title: '产品指导单价',
      dataIndex: 'guidePrice',
    },
    {
      title: '折扣',
      dataIndex: 'discount',
    },
    {
      title: '合计',
      dataIndex: 'total',
    },
  ];

  const jump = () => {
    router.push({
      name: 'AddTaskPurchaseList',
    });
  };

  const create = () => {
    modelVisible.value = true;
    SeeDate.value = SelectDate.value;
    setupType.value = 2;
  };

  const createPlan = () => {
    isPlanVisible.value = true;
  };

  const addPlanProduct = async (number: string) => {
    await postPlanPurchase({ number, planProducts: SelectDate.value });
    router.push({
      name: 'PlanPurchaseList',
    });
  };

  const createTask = () => {
    taskTableData.value = SelectDate.value;
    isTaskVisible.value = true;
  };

  // let res = [];
</script>

<style scoped lang="less">
  // .content-head {
  // }
  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
</style>
